<template>
  <div style="padding: 10px;">
    <el-form inline>
      <el-form-item>
        <el-button icon="el-icon-plus" type="success" @click="handleEdit('')">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" :border="true" style="width: 100%">
      <el-table-column prop="CreateTime" label="日期" :formatter="dateFormatter" />
      <el-table-column prop="drxzbthsyxrs" label="当日新增本土核酸阳性人数" />
      <el-table-column prop="dqbthsyxrs" label="当前本土核酸阳性人数" />
      <el-table-column prop="drxzsrxhsyxrs" label="当日新增输入性核酸阳性人数" />
      <el-table-column prop="dqssxhsyxrs" label="当前输入性核酸阳性人数" />
      <el-table-column prop="wzzgrzrs" label="无症状感染者人数" />
      <el-table-column prop="qzblrs" label="确诊病例人数" />
      <el-table-column prop="hsjcrs" label="核酸检测人数" />
      <el-table-column prop="hsjcYangxs" label="核酸检测阳性数（阳性）" />
      <el-table-column prop="hsjcYinxs" label="核酸检测阴性数(阴性)" />
      <el-table-column prop="pccmjrs" label="排查出密接人数" />
      <el-table-column prop="ccjrs" label="次密接人数" />
      <el-table-column prop="zyzlrs" label="在院治疗人数" />
      <el-table-column prop="cyrs" label="出院人数" />
      <el-table-column prop="swrs" label="死亡人数" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" size="mini" type="primary" plain @click="handleEdit(scope.row.Id)">编辑</el-button>
          <el-button icon="el-icon-delete" size="mini" type="danger" plain @click="handleDelete(scope.row.Id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px;">
      <el-pagination
        :current-page="PageIndex"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="编辑" :visible.sync="visible" @close="handleClose">
      <el-form :model="form" label-width="200px">
        <el-form-item label="当日新增本土核酸阳性人数">
          <el-input v-model.number="form.drxzbthsyxrs" />
        </el-form-item>
        <el-form-item label="当前本土核酸阳性人数">
          <el-input v-model.number="form.dqbthsyxrs" />
        </el-form-item>
        <el-form-item label="当日新增输入性核酸阳性人数">
          <el-input v-model.number="form.drxzsrxhsyxrs" />
        </el-form-item>
        <el-form-item label="当前输入性核酸阳性人数">
          <el-input v-model.number="form.dqssxhsyxrs" />
        </el-form-item>
        <el-form-item label="无症状感染者人数">
          <el-input v-model.number="form.wzzgrzrs" />
        </el-form-item>
        <el-form-item label="确诊病例人数">
          <el-input v-model.number="form.qzblrs" />
        </el-form-item>
        <el-form-item label="核酸检测人数">
          <el-input v-model.number="form.hsjcrs" />
        </el-form-item>
        <el-form-item label="核酸检测阳性数（阳性）">
          <el-input v-model.number="form.hsjcYangxs" />
        </el-form-item>
        <el-form-item label="核酸检测阴性数(阴性)">
          <el-input v-model.number="form.hsjcYinxs" />
        </el-form-item>
        <el-form-item label="排查出密接人数">
          <el-input v-model.number="form.pccmjrs" />
        </el-form-item>
        <el-form-item label="次密接人数">
          <el-input v-model.number="form.ccjrs" />
        </el-form-item>
        <el-form-item label="在院治疗人数">
          <el-input v-model.number="form.zyzlrs" />
        </el-form-item>
        <el-form-item label="出院人数">
          <el-input v-model.number="form.cyrs" />
        </el-form-item>
        <el-form-item label="死亡人数">
          <el-input v-model.number="form.swrs" />
        </el-form-item>
        <el-row style="text-align: center;">
          <el-button icon="el-icon-check" type="success" @click="handleSubmit">提交</el-button>
          <el-button icon="el-icon-close" type="danger" @click="visible=false">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getList, insert, update, del, detail } from '@/api/sssj'
import moment from '@/utils/moment'

export default {
  name: 'Detect',
  data() {
    return {
      tableData: [],
      form: {
        Id: '',
        drxzbthsyxrs: 0,
        dqbthsyxrs: 0,
        drxzsrxhsyxrs: 0,
        dqssxhsyxrs: 0,
        wzzgrzrs: 0,
        qzblrs: 0,
        hsjcrs: 0,
        hsjcYangxs: 0,
        hsjcYinxs: 0,
        pccmjrs: 0,
        ccjrs: 0,
        zyzlrs: 0,
        cyrs: 0,
        swrs: 0
      },
      PageIndex: 1,
      PageSize: 10,
      total: 0,
      visible: false,
      loading: true
    }
  },
  created() {
    this.getByPage()
  },
  methods: {
    handleEdit(id) {
      this.visible = true
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.Id = id
      if (this.Id !== '') {
        detail({
          Id: id
        }).then(res => {
          if (res.IsSuccess) {
            this.form = res.Data
          } else {
            this.$message.error(res.Message)
          }
          this.getByPage()
          loading.close()
        }).catch(err => {
          console.log(err)
          this.getByPage()
          loading.close()
        })
      }
    },
    handleDelete(id) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      del({
        Id: id
      }).then(res => {
        if (res.IsSuccess) {
          this.$message.success(res.Message)
        } else {
          this.$message.error(res.Message)
        }
        this.getByPage()
        loading.close()
      }).catch(err => {
        console.log(err)
        this.getByPage()
        loading.close()
      })
    },
    handleSubmit() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (this.Id === '') {
        console.log(this.form)
        insert(this.form).then(res => {
          if (res.IsSuccess) {
            this.$message.success(res.Message)
          } else {
            this.$message.error(res.Message)
          }
          this.getByPage()
          loading.close()
        }).catch(err => {
          console.log(err)
          this.getByPage()
          loading.close()
        })
      } else {
        update(this.form).then(res => {
          if (res.IsSuccess) {
            this.$message.success(res.Message)
          } else {
            this.$message.error(res.Message)
          }
          this.getByPage()
          loading.close()
        }).catch(err => {
          console.log(err)
          this.getByPage()
          loading.close()
        })
      }
    },
    handleClose() {
      Object.assign(this.$data.form, this.$options.data().form)
    },
    getByPage() {
      getList({
        PageSize: this.PageSize,
        PageIndex: this.PageIndex
      }).then(res => {
        this.total = res.Total
        this.tableData = res.Data
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.PageSize = val
      this.getByPage()
    },
    handleCurrentChange(val) {
      this.PageIndex = val
      this.getByPage()
    },
    dateFormatter(row) {
      return moment(new Date(row.CreateTime)).format('YYYY-MM-DD HH:mm')
    }
  }
}
</script>

<style scoped>

</style>
